<template>
  <div class="headlthtest-wrap">
    <div class="healthy-title">注：本测评以<span class="colorType3">《中华人民共和国国家标准 - 老年人能力评估规范》</span>（GB/T 42195-2022）为标准，各省测评标准均有所不同，此测评仅供参考</div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="基本状态评估" name="step_1">
        <el-form label-position="right" label-width="120px" ref="form1" :rules="rules1" :model="form1">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="老人姓名" prop="name">
                <el-input v-model="form1.name" disabled placeholder="老人姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="评估日期" prop="review_time">
                <el-date-picker
                  v-model="form1.review_time"
                  align="right"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm"
                  placeholder="请选择评估日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="评估原因" prop="cause_type">
                <el-select v-model="form1.cause_type" placeholder="请选择评估原因">
                  <el-option label="首次评估" value="1"></el-option>
                  <el-option label="例行评估" value="2"></el-option>
                  <el-option label="即时评估" value="3"></el-option>
                  <el-option label="其他" value="4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="form1.cause_type === '4'">
              <el-form-item label="评估原因" prop="cause">
                <el-input v-model="form1.cause" placeholder="请输入评估原因"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="healthy-step1-title">近30天内照护风险事件</div>
          <div v-for="(item, indexP) in accident" :key="indexP">
            <el-form-item :label="item.zhibiao" :prop="item.zhibiao">
              <el-radio-group v-model="form1[item.zhibiao]">
                <el-radio v-for="(ite,idx) in item.pingfen" :label="idx" :key="idx">{{ ite.msg }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <el-form-item class="contacts-add">
            <el-button type="primary" @click="onSubmit1">下一步</el-button>
            <el-button @click="close">关闭</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>


      <el-tab-pane label="自理能力评估" name="step_2" :disabled="disabled2">
        <el-form label-position="right" ref="form2" :rules="rules2" :model="form2">
          <div v-for="(item, index) in daily_life" :key="index">
            <div class="healthy-step2-title"><span class="colorType3">*</span>{{ item.zhibiao }} 【 {{ item.shuoming }} 】</div>
            <el-form-item label="" :prop="item.zhibiao">
              <el-radio-group v-model="form2[item.zhibiao]">
                <el-radio v-for="(ite, idx) in item.pingfen" :label="idx" :key="idx"><span class="colorType3">【{{ ite.fen }}分】</span>{{ ite.msg.split(':')[1] }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <el-form-item class="contacts-add">
            <el-button type="primary" @click="onSubmit2">下一步</el-button>
            <el-button @click="close">关闭</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>



      <el-tab-pane label="精神状态评估" name="step_3" :disabled="disabled3">
        <el-form label-position="right" ref="form3" :rules="rules3" :model="form3">
          <div v-for="(item, index) in perception" :key="index">
            <div class="healthy-step3-title"><span class="colorType3">*</span>{{ item.zhibiao }} 【 {{ item.shuoming }} 】</div>
            <el-form-item label="" :prop="item.zhibiao">
              <el-radio-group v-model="form3[item.zhibiao]">
                <el-radio v-for="(ite, idx) in item.pingfen" :label="idx" :key="idx"><span class="colorType3">【{{ ite.fen }}分】</span>{{ ite.msg.split(':')[1] }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <el-form-item class="contacts-add">
            <el-button type="primary" @click="onSubmit3">下一步</el-button>
            <el-button @click="close">关闭</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>


      <el-tab-pane label="感知觉与社会参与评估" name="step_4" :disabled="disabled4">
        <el-form label-position="right" ref="form4" :rules="rules4" :model="form4">
          <div v-for="(item, index) in social_ability" :key="index">
            <div class="healthy-step4-title"><span class="colorType3">*</span>{{ item.zhibiao }} <span v-if="item.shuoming">【 {{ item.shuoming }} 】</span></div>
            <el-form-item label="" :prop="item.zhibiao">
              <el-radio-group v-model="form4[item.zhibiao]">
                <el-radio v-for="(ite, idx) in item.pingfen" :label="idx" :key="idx"><span class="colorType3">【{{ ite.fen }}分】</span>{{ ite.msg.split(':')[1] }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <el-form-item class="contacts-add">
            <el-button type="primary" @click="onSubmit4">下一步</el-button>
            <el-button @click="close">关闭</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>


      <el-tab-pane label="基础运动能力评估" name="step_5" :disabled="disabled5">
        <el-form label-position="right" ref="form5" :rules="rules5" :model="form5">
          <div v-for="(item, index) in mental_outlook" :key="index">
            <div class="healthy-step5-title"><span class="colorType3">*</span>{{ item.zhibiao }} <span v-if="item.shuoming">【 {{ item.shuoming }} 】</span></div>
            <el-form-item label="" :prop="item.zhibiao">
              <el-radio-group v-model="form5[item.zhibiao]">
                <el-radio v-for="(ite, idx) in item.pingfen" :label="idx" :key="idx"><span class="colorType3">【{{ ite.fen }}分】</span>{{ ite.msg.split(':')[1] }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <el-form-item class="contacts-add">
            <el-button type="primary" @click="onSubmit5">下一步</el-button>
            <el-button @click="close">关闭</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>


      <el-tab-pane label="精神疾病" name="step_6" :disabled="disabled6">
        <el-form label-position="right" ref="form6" :rules="rules6" :model="form6">
          <div v-for="(item, index) in diagnosis" :key="index">
            <div class="healthy-step5-title"><span class="colorType3">*</span>{{ item.zhibiao }}</div>
            <el-form-item label="" :prop="item.zhibiao">
              <el-radio-group v-model="form6[item.zhibiao]">
                <el-radio v-for="(ite, idx) in item.pingfen" :label="idx" :key="idx"><span class="colorType3"></span>{{ ite.msg }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <el-form-item class="contacts-add">
            <el-button type="primary" @click="onSubmit6">提交</el-button>
            <el-button @click="close">关闭</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>


    </el-tabs>
  </div>
</template>

<script>
import * as APIHealthAssessment from '@/api/healthAssessment'
export default {
  name: 'healthy-assess',
  components: {
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      activeName: 'step_1',
      disabled2: true,
      disabled3: true,
      disabled4: true,
      disabled5: true,
      disabled6: true,
      form1: {},
      rules1: {
        review_time: [
          {
            required: true,
            message: '请选择评估时间',
            trigger: 'change'
          }
        ],
        cause_type: [
          {
            required: true,
            message: '请选择评估原因',
            trigger: 'change'
          }
        ],
        /* '跌倒': [
          {
            required: true,
            message: '请选择跌倒',
            trigger: 'change'
          }
        ],
        "走失": [
          {
            required: true,
            message: '请选择走失',
            trigger: 'change'
          }
        ],
        '噎食': [
          {
            required: true,
            message: '请选择噎食',
            trigger: 'change'
          }
        ],
        '自杀、自伤': [
          {
            required: true,
            message: '请选择自杀、自伤',
            trigger: 'change'
          }
        ],
        '其他': [
          {
            required: true,
            message: '请选择其他',
            trigger: 'change'
          }
        ] */
      },
      form2: {},
      rules2: {
        /* '进食': [
          {
            required: true,
            message: '请选择进食能力',
            trigger: 'change'
          }
        ],
        '洗澡': [
          {
            required: true,
            message: '请选择洗澡能力',
            trigger: 'change'
          }
        ],
        '修饰': [
          {
            required: true,
            message: '请选择修饰能力',
            trigger: 'change'
          }
        ],
        '穿/脱上衣': [
          {
            required: true,
            message: '请选择穿衣能力',
            trigger: 'change'
          }
        ],
        '穿/脱裤子和鞋袜': [
          {
            required: true,
            message: '请选择穿/脱裤子和鞋袜能力',
            trigger: 'change'
          }
        ],
        '大便控制': [
          {
            required: true,
            message: '请选择大便控制能力',
            trigger: 'change'
          }
        ],
        '小便控制': [
          {
            required: true,
            message: '请选择小便控制',
            trigger: 'change'
          }
        ],
        '如厕': [
          {
            required: true,
            message: '请选择如厕能力',
            trigger: 'change'
          }
        ] */
      },
      form3: {},
      rules3: {
       /* '时间定向': [
          {
            required: true,
            message: '请选择时间定向能力',
            trigger: 'change'
          }
        ],
        '空间定向': [
          {
            required: true,
            message: '请选择空间定向能力',
            trigger: 'change'
          }
        ],
        '人物定向': [
          {
            required: true,
            message: '请选择人物定向能力',
            trigger: 'change'
          }
        ],
        '记忆': [
          {
            required: true,
            message: '请选择记忆能力',
            trigger: 'change'
          }
        ],
        '理解能力': [
          {
            required: true,
            message: '请选择理解能力',
            trigger: 'change'
          }
        ],
        '表达能力': [
          {
            required: true,
            message: '请选择表达能力',
            trigger: 'change'
          }
        ],
        '攻击行为': [
          {
            required: true,
            message: '请选择攻击行为能力',
            trigger: 'change'
          }
        ],
        '抑郁症状': [
          {
            required: true,
            message: '请选择抑郁症状能力',
            trigger: 'change'
          }
        ],
        '意识水平': [
          {
            required: true,
            message: '请选择意识水平',
            trigger: 'change'
          }
        ], */
      },
      form4: {},
      rules4: {
       /* '视力': [
          {
            required: true,
            message: '请选择视力能力',
            trigger: 'change'
          }
        ],
        '听力': [
          {
            required: true,
            message: '请选择听力能力',
            trigger: 'change'
          }
        ],
        '执行日常事务': [
          {
            required: true,
            message: '请选择执行日常事务能力',
            trigger: 'change'
          }
        ],
        '使用交通工具外出': [
          {
            required: true,
            message: '请选择使用交通工具外出能力',
            trigger: 'change'
          }
        ],
        '社会交往能力': [
          {
            required: true,
            message: '请选择社会交往能力',
            trigger: 'change'
          }
        ], */
      },
      form5: {},
      rules5: {
        /* '床上体位转移': [
          {
            required: true,
            message: '请选择床上体位转移能力',
            trigger: 'change'
          }
        ],
        '床椅转移': [
          {
            required: true,
            message: '请选择床椅转移能力',
            trigger: 'change'
          }
        ],
        '平地行走': [
          {
            required: true,
            message: '请选择平地行走能力',
            trigger: 'change'
          }
        ],
        '上下楼梯': [
          {
            required: true,
            message: '请选择上下楼梯能力',
            trigger: 'change'
          }
        ], */
      },
      form6: {},
      rules6: {
        /* '痴呆': [
          {
            required: true,
            message: '请选择痴呆',
            trigger: 'change'
          }
        ],
        '其他精神和行为障碍疾病': [
          {
            required: true,
            message: '请选择其他精神和行为障碍疾病',
            trigger: 'change'
          }
        ], */
      },
      dialogVisible: false,
      redata: {},
      result: {},
      isResult: false,
      daily_life: [],  // 自理能力
      mental_outlook: [],   // :基础运动能力
      perception: [], //:精神状态
      social_ability: [], //:感知觉与社会参与
      accident: [], //:近30天内照护风险事件
      diagnosis: [], //:精神疾病
    }
  },
  watch: {
    data: {
      handler (newval) {
        this.form1 = JSON.parse(JSON.stringify(newval));
        this.getSreview1Question()
      },
      // 可以一进页面就触发监听器  监听器自带的immediate
      immediate: true,
      deep: true
    }
  },
  methods: {
    close () {
      this.$emit('close')
    },
    getSreview1Question(){
      const self = this;
     APIHealthAssessment.reviewQuestion().then(res => {
       // console.log(res)
       self['daily_life'] = res['data']['daily_life'];
       self['mental_outlook'] = res['data']['mental_outlook'];
       self['perception'] = res['data']['perception'];
       self['social_ability'] = res['data']['social_ability'];
       self['accident'] = res['data']['accident'];
       self['diagnosis'] = res['data']['diagnosis'];


       self['daily_life'].forEach((item, index, arr) => {
         self['rules2'][item['zhibiao']] =  [
          {
            required: true,
            message: '请选择' + item['zhibiao'],
            trigger: 'change'
          }
        ]
       })


       self['mental_outlook'].forEach((item, index, arr) => {
         self['rules5'][item['zhibiao']] =  [
           {
             required: true,
             message: '请选择' + item['zhibiao'],
             trigger: 'change'
           }
         ]
       })

       self['perception'].forEach((item, index, arr) => {
         self['rules3'][item['zhibiao']] =  [
           {
             required: true,
             message: '请选择' + item['zhibiao'],
             trigger: 'change'
           }
         ]
       })
       self['social_ability'].forEach((item, index, arr) => {
         self['rules4'][item['zhibiao']] =  [
           {
             required: true,
             message: '请选择' + item['zhibiao'],
             trigger: 'change'
           }
         ]
       })
       self['accident'].forEach((item, index, arr) => {
         self['rules1'][item['zhibiao']] =  [
           {
             required: true,
             message: '请选择' + item['zhibiao'],
             trigger: 'change'
           }
         ]
       })
       self['diagnosis'].forEach((item, index, arr) => {
         self['rules6'][item['zhibiao']] =  [
           {
             required: true,
             message: '请选择' + item['zhibiao'],
             trigger: 'change'
           }
         ]
       })

     })
    },
    // 基本状态评估
    onSubmit1 () {
      const self = this;
      self['disabled2'] = false;
      this.$refs.form1.validate((valid) => {
        if (valid) {
          self['activeName'] = 'step_2'
          self['disabled2'] = false;
        }
      })
    },
    onSubmit2(){
      const self = this;
      this.$refs.form2.validate((valid) => {
        if (valid) {
          self['activeName'] = 'step_3'
          self['disabled3'] = false;
        }
      })
    },
    onSubmit3(){
      const self = this;
      this.$refs.form3.validate((valid) => {
        if (valid) {
          self['activeName'] = 'step_4'
          self['disabled4'] = false;
        }
      })
    },
    onSubmit4(){
      const self = this;
      this.$refs.form4.validate((valid) => {
        if (valid) {
           self['activeName'] = 'step_5'
           self['disabled5'] = false;
        }
      })
    },
    onSubmit5(){
      const self = this;
      this.$refs.form5.validate((valid) => {
        if (valid) {
          self['activeName'] = 'step_6'
          self['disabled6'] = false;
        }
      })
    },
    onSubmit6(){
      const self = this;
      this.$refs.form6.validate((valid) => {
        if (valid) {
           const daily_life = [];
           const mental_outlook = [];
           const perception = [];
           const social_ability = [];
           const accident = [];
           const diagnosis = [];
           self['daily_life'].forEach((item, index, arr) => {
             daily_life.push(String(self['form2'][item['zhibiao']]))
           })
           self['mental_outlook'].forEach((item, index, arr) => {
             mental_outlook.push(String(self['form5'][item['zhibiao']]))
           })
           self['perception'].forEach((item, index, arr) => {
             perception.push(String(self['form3'][item['zhibiao']]))
           })
           self['social_ability'].forEach((item, index, arr) => {
             social_ability.push(String(self['form4'][item['zhibiao']]))
           })
           self['accident'].forEach((item, index, arr) => {
             accident.push(String(self['form1'][item['zhibiao']]))
           })
           self['diagnosis'].forEach((item, index, arr) => {
             diagnosis.push(String(self['form6'][item['zhibiao']]))
           })
           const data = {
             eid: self.data.eid,
             review_time: self['form1']['review_time'],
             cause_type: self['form1']['cause_type'],
             daily_life:daily_life.join(','),
             mental_outlook:mental_outlook.join(','),
             perception:perception.join(','),
             social_ability:social_ability.join(','),
             accident:accident.join(','),
             diagnosis:diagnosis.join(',')
           }
           if(self['form1'].hasOwnProperty('cause')){
             data['cause'] = self['form1']['cause']
           }
           APIHealthAssessment.reviewAdd(data).then(res => {
            this.$message({ type: "success", message: "添加成功!" });
            self.close();
            self.$emit('load')
           })

        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
  .colorType0 {
    color: #409EFF;
  }
  .colorType1 {
    color: #67C23A;
  }
  .colorType2 {
    color: #E6A23C;
  }
  .colorType3 {
    color: #F56C6C;
  }
  .colorType4 {
    color: #dc1668;
  }
  .headlthtest-wrap{
    padding-top: 20px;
  }
  .healthy-step1-title {
    width: 100%;
    border-bottom: 1px solid #E6A23C;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 21px;
    color: #E6A23C;
  }
  .healthy-step2-title {
    width: 100%;
    border-bottom: 1px solid #67C23A;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 21px;
    color: #67C23A;
  }
  .healthy-step3-title {
    width: 100%;
    border-bottom: 1px solid #36adb3;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 21px;
    color: #36adb3;
  }
  .healthy-step4-title {
    width: 100%;
    border-bottom: 1px solid #409EFF;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 21px;
    color: #409EFF;
  }
  .healthy-step5-title {
    width: 100%;
    border-bottom: 1px solid #b416dc;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 21px;
    color: #b416dc;
  }
  .healthy-title {
    margin-top: -25px;
    font-size: 16px;
    text-align: center;
    margin-bottom: 20px;
  }
  .headlthtest-wrap {
    .el-radio {
      display: block;
      line-height: 40px;
    }
  }
</style>
